<script setup>
import { ref } from "vue";
import { getUserAlbum } from "../../../apis/user";
import { createWindow } from "../../../utils/ipcRenderer";

const playList = ref([]);

const getInit = () => {
  getUserAlbum({}).then((res) => {
    playList.value = res.data;
  });
};

getInit();

const handleClick = (id) => {
  createWindow({
    windowName: "albumDetail",
    path: "albumDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};
</script>

<template>
  <div class="all_wrap">
    <div v-if="playList" class="song_list">
      <div v-if="playList.length > 0" class="created_list">
        <div class="list_wrap">
          <div class="item_wrap" v-for="(item, index) in playList" :key="index">
            <div class="item">
              <div @click="handleClick(item.id)" class="cover">
                <el-image :src="item.picUrl+`${'?param=300y300'}}`" fit="cover" lazy>
                  <template #placeholder>
                    <div class="image-slot">
                      Loading<span class="dot">...</span>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="name">{{ item.name }}</div>
              <div class="song_count">{{ item.size }}首</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无专辑"></el-empty>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.all_wrap {
  .song_list {
    width: 100%;
    .title {
      font-weight: 600;
      margin-bottom: 20px;
      font-size: 20px;
    }
  }

  .created_list {
    .list_wrap {
      flex-wrap: wrap;
      display: grid;
      justify-content: space-around;
      align-content: center;
      grid-template-columns: repeat(auto-fill, 16vw);
      .item_wrap {
        .item {
          position: relative;
          .cover {
            width: 15vw;
            height: 15vw;
            .el-image {
              width: 100%;
              height: 100%;
              border-radius: 6px;
              box-shadow: 0px 2px 12px 0 rgba(0, 0, 0, 0.2);
            }
            img {
              transition: 2s;
            }
          }
          .count {
            position: absolute;
            top: 2%;
            right: 6%;
            font-size: 10px;
            color: #fff;
            .iconfont {
              font-size: 14px;
              margin-right: 3px;
            }
          }
          .name {
            width: 200px;
            color: #373737;
            font-size: 14px;
            line-height: 35px;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .song_count {
            font-size: 12px;
            color: #9f9f9f;
          }
        }
      }
    }
  }
}
</style>
